<template>
  <div class="aside">
    <el-aside width="200px">
      <el-menu
        :default-openeds="['2']"
        active-text-color="#ffd04b"
        :router="true"
        background-color="#545c64"
        text-color="#fff"
      >
        <el-submenu :index="item.id + ''" v-for="item in menu" :key="item.id">
          <template slot="title"
            ><i class="el-icon-message"></i>{{ item.auth_name }}</template
          >
          <el-menu-item-group>
            <el-menu-item
              :index="v.auth_path"
              v-for="v in item.children"
              :key="v.id"
              >{{ v.auth_name }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>
    
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['leftmenu']),
    menu() {
      let arr = []
      this.leftmenu.forEach((item) => {
        let obj = {
          auth_name: item.auth_name,
          children: [],
          id: item.id,
        }
        item.children.forEach((v) => {
          if (!v.auth_name.includes('删除') && !v.auth_name.includes('修改')) {
            obj.children.push(v)
          }
        })
        arr.push(obj)
      })
      return arr
    },
  },
  methods: {},
}
</script>
    
<style lang="scss" scoped>
// .aside {
//   height: 100vh;
// }
.el-aside {
  color: #333;
}
.el-menu {
  border: 0;
}
.el-menu[data-v-7b79c2f6] {
  width: 100%;
  height: 100vh;
}
</style>